<template>
	<div class="graphicnavigation">
		<div class="menu-button sd-flex sd-flex-wrap comp-content">
			<template v-for="(item, index) in datas.list">
				<div class="menu-item" :style="baseStyle(datas)" v-if="index < datas.row * datas.col">
					<div class="badge" v-if="item.badge.show == 1" :style="{ color: item.badge.color, background: item.badge.bgColor }">
						{{ item.badge.text }}
					</div>
					<div class="sd-flex sd-image" style="width: 49px; height: 49px; border-radius: 0px">
						<el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover" />
						<el-image v-else :src="img" fit="cover" />
					</div>
					<div class="title" v-if="datas.layout === 1" :style="{ color: item.title.color }">{{ item.title.text }}</div>
				</div>
			</template>
			<!-- v-if="datas.row * datas.col < datas.list.length" -->
			<div class="indicator" v-if="datas.row * datas.col < datas.list.length">
				<span class="icon my-icon icon-xiaotuhengxianghuadong1"> </span>
			</div>
		</div>
		<!-- 删除 组件 -->
		<slot name="deles" />
	</div>
</template>

<script setup name="graphicnavigation">
import { STATIC_URL } from '/@/utils/config';
import img from '/@/assets/decoration/images/imgs.png';

const props = defineProps({
	datas: {},
});

const baseStyle = (item) => {
	let width = '33.33%';
	if (item.col === 3) {
		width = '33.33%';
	}

	if (item.col === 4) {
		width = '25%';
	}

	if (item.col === 5) {
		width = '20%';
	}

	return {
		width: width,
	};
};
</script>

<style scoped lang="scss">
.graphicnavigation {
	position: relative;
	min-height: 30px;
}

.comp-content {
	background-size: 100% !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
	min-height: 30px;
}

.menu-button .menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 16px;
	position: relative;
	margin: 15px 0 5px;
}

.menu-button .indicator {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-button .menu-item .title {
	height: 16px;
	line-height: 16px;
	margin-top: 8px;
	font-size: 12px;
}

.menu-item .badge {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	padding: 0 6px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	border-radius: 6px 6px 6px 0;
}
</style>
